@layout("/common/_containers.html"){

<div class="ibox float-e-margins">
            <!--<div class="ibox-title">-->
                <!--<h5>到店客户管理</h5>-->
            <!--</div>-->
            <div style="display: none">
                <input type="hidden" id="backVisit" value="">
                <input type="hidden" id="oneChannelValue" value="">
                <input type="hidden" id="twoChannelValue" value="">
                <input type="hidden" id="thrChannelValue" value="">
                <input type="hidden" id="customerStatus" value="">
                <input type="hidden" id="xcustomerStatus" value="">
                <input type="hidden" id="wgz" value="1">
                <input type="hidden" id="appointmentPayServiceValue" value="">
                <input type="hidden" id="menuName" value="到店-患者信息">
            </div>
            <div class="ibox-content record_box">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="divFlex">
                            <div class="flex_one">
                                <div>一级渠道</div>
                                <div>二级渠道</div>
                                <div>三级渠道</div>
                                <div>成交状态</div>
                                <div>咨询项目</div>
                                <div>TC</div>
                                <div>匹配电话</div>
                            </div>
                            <div class="flex_two">
                                <div>
                                    <select id="oneChannel" name="oneChannel" class="selectpicker" multiple
                                            title="请选择" onchange="Customer.inquire()">
                                    </select>
                                </div>
                                <div>
                                    <select id="twoChannel" name="twoChannel" class="selectpicker" multiple
                                            title="请选择" onchange="Customer.inquire()">
                                    </select>
                                </div>
                                <div>
                                    <select id="thrChannel" name="thrChannel" class="selectpicker" multiple
                                            title="请选择" onchange="Customer.inquire()">
                                    </select>
                                </div>
                                <div>
                                    <select id="dealStatus" name="dealStatus" class="selectBox"
                                            onchange="Customer.inquire()">
                                        <option value="">全部</option>
                                        <option value="已成交">已成交</option>
                                        <option value="未成交">未成交</option>
                                    </select>
                                </div>
                                <div>
                                    <select type="text" class="selectpicker" id="appointmentPayService" multiple data-actions-box="true"
                                            title="请选择" name="appointmentPayService" style="border: 1px solid #999999;"
                                            onchange="Customer.inquire() ">
                                    </select>
                                </div>
                                <div>
                                    <select type="text" class="selectBox" id="fieldTc"
                                            name="fieldTc" style="border: 1px solid #999999"
                                            onchange="Customer.inquire()">
                                    </select>
                                </div>
                                <div>
                                    <input type="text" class="selectBox" id="customerPhone" name="customerPhone">
                                    <a href="javascript:;" style="color: #2eadd0;" onclick="Customer.reservationMatching()">匹配</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style="margin-top: 20px;">
                        <div style="display: flex">
                            <div style="flex: 6;display: flex">
                                <div style="flex: 3;margin-right: 15px;">
                                    <label style="width: 80px;display: inline-block;">到诊时间</label>
                                    <input type="text" id="startArrivalTime" class="selectBox" style="border: 1px solid #999999;width: 192px;"
                                     onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                                    <span>-</span>
                                    <input type="text" id="endArrivalTime" class="selectBox" style="border: 1px solid #999999;width: 192px;"
                                           onclick="laydate({istiem:true,format:'YYYY-MM-DD hh:mm:ss'})">
                                </div>
                                <div>
                                    <div style="width: 120%;height: 39px;border: 1px solid #999999;border-radius: 5px">
                                        <span class="glyphicon glyphicon-search" style="left: 10px;top: 9px;"></span>
                                        <input type="text" class="customerPhone" id="reach" placeholder="姓名/电话/微信/病历号"
                                               onchange="Customer.search()"
                                               style="width: 85%;height: 35px;border: none;float: right;outline:none;margin-top: 1px">
                                    </div>
                                </div>
                            </div>
                            <div style="flex: 7;text-align: right;" class="btn_box">
                                @if(shiro.hasPermission("/customer/aOperations")){
                                <button type="button" class="btn" onclick="Customer.specialRefund()">特殊退款
                                </button>
                                @}
                                @if(shiro.hasPermission("/customer/aOperations")){
                                <button type="button" class="btn" onclick="Customer.specialSupplement()">特殊补款
                                </button>
                                @}
                                @if(shiro.hasPermission("/customer/delete")){
                                <button type="button" class="btn" onclick="Customer.openToVoid()">作废</button>
                                @}
                                <button type="button" class="btn" onclick="Customer.resetSearch()">清空</button>
                                @if(shiro.hasPermission("/customer/aOperations")){
                                <button type="button" class="btn" onclick="Customer.uploadCustomer()">导入客户信息
                                </button>
                                @}
                                @if(shiro.hasPermission("/customer/update")){
                                <button type="button" class="btn" onclick="Customer.downLoad()">导出</button>
                                @}
                                @if(shiro.hasPermission("/customer/aOperations")){
                                <!--<button type="button" class="btn" onclick="Customer.inputInfo()">导入预约查询</button>-->
                                @}
                                <button type="button" class="btn" onclick="screenTable()">筛选</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12" style="background:#2f4050;;line-height: 46px;margin-top: 19px;">
                        <ul class="records clearfix bigSize">
                            <li onclick="Customer.totalNumber()">
                                总人数：<span style="color: #03feb7" id="total">0</span>
                                金额：<span style="color: #03feb7"><span id="totalMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.firstNumbers()">
                                初到：<span style="color: #fff701" id="first">0</span>
                                金额：<span style="color: #fff701"><span id="firstMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.firstjieyaNumber()">
                                初到洁牙：<span style="color: #fff701" id="firstjieya">0</span>
                                金额：<span style="color: #fff701"><span id="firstjieyaMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.firstZhiliaoNumber()">
                                初治：<span style="color: #fff701" id="firstZhiliao">0</span>
                                金额：<span style="color: #fff701"><span id="firstZhiliaoMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.twoNumber()">
                                复到：<span style="color: #fff701" id="two">0</span>
                                金额：<span style="color: #fff701"><span id="twoMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.twojieyaNumber()">
                                复到洁牙：<span style="color: #fff701" id="twojieya">0</span>
                                金额：<span style="color: #fff701"><span id="twojieyaMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.twoZhiliaoNumber()">
                                复到初治：<span style="color: #fff701" id="twoZhiliao">0</span>
                                金额：<span style="color: #fff701"><span id="twoZhiliaoMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.washNumber()">
                                流失：<span style="color: #fff701" id="wash">0</span>
                                金额：<span style="color: #fff701"><span id="washMoney">0</span>元</span>
                            </li>
                            <li onclick="Customer.againNumber()">
                                再消：<span style="color: #fff701" id="again">0</span>
                                金额：<span style="color: #fff701"><span id="againMoney">0</span>元</span>
                            </li>
                        </ul>
                    </div>
                    <#table id="CustomerTable"/>
                </div>
            </div>
        </div>

<script src="${ctxPath}/static/modular/arrival/customer/customer.js"></script>
<script src="${ctxPath}/static/js/common/jsChannels.js"></script>
<script>
    var oneChanneli = document.getElementById("oneChannelValue").value;
    var twoChanneli = document.getElementById("twoChannelValue").value;
    var thrChanneli = document.getElementById("thrChannelValue").value;
    $.post(Feng.ctxPath + "/channel/getChannelsss", function (data) {
        ChannelList = data;
        channelInit('oneChannel', 'twoChannel', 'thrChannel');
        $('#oneChannel').selectpicker('refresh');
        $('#oneChannel').selectpicker('render');
    }, "json");
    //初始化下拉预约项目列表
    $.post(Feng.ctxPath + "/payService/getList", function (data) {
        for (var i = 0; i < data.length; i++) {
            $('#appointmentPayService').append("<option value=" + data[i].department + ">" + data[i].department + "</option>");
        }
        $('#appointmentPayService').selectpicker('refresh');
        $('#appointmentPayService').selectpicker('render');
    }, "json");
</script>
@}
<style>
    ul {
        padding: 0;
        margin: 0;
    }

    .selectBox {
        width: 60%;
        height: 39px;
        border-radius: 5px;
        padding-left: 5px;
    }

    .ulBox {
        display: flex;
    }

    .ulBox > li {
        flex: 1;
    }

    .ulBox laber {
        display: inline-block;
        width: 80px;
    }

    .records > li {
        float: left;
        margin-right: 30px;
    }

    .records > li {
        color: white;
        cursor: pointer;
    }

    .records > li > span {
        font-weight: bolder;
    }

    .bigSize {
        font-size: 1.2em;
    }

    .btn_box button {
        margin: 0;
        color: white;
        background: #2b6594;
        padding: 7px 30px;
        font-size: 1em;
    }
    div .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
        width: 155px;
    }

    .divFlex{display: flex;flex-direction: column;border: 1px solid #cccccc;background: #f5f5f5;text-align: center}
    .flex_one,.flex_two{flex: 1;display: flex}
    .flex_one>div,.flex_two>div{flex: 1;border-right: 1px solid #cccccc;padding: 8px;}
    .flex_one>div:last-of-type,.flex_two>div:last-of-type{border: none;}
    .flex_one{border-bottom: 1px solid #cccccc;font-weight: bold;}
    .flex_two input,.flex_two select{width: 65%;height: 38px;padding-left: 5px;}

    #customerPhone{ border: 1px solid #999999;  width: 60%;  padding-left: 10px;}
</style>